<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>这是一个div</div>
    <script>
        // function fun() {}

        // var fun = function(){}

        var fun = (a,b) => {
            console.log(a+b);
        }
        fun(10,20)

        // 当函数只有一个参数时可以不加括号
        var fun1 = a => {
            console.log(a);
        }
        fun1(10)

        var fun2 = a => {
            return a;
        }
        // 当函数内只有一个return时,可以简写
        var fun3 = a => a
        console.log(fun3(10));


        var obj = {
            name:"obj",
            fun:() => {
                console.log(this);//window
            },
            fun1:function(){
                console.log(this); //obj
            },
            obj1:{
                name:"obj1",
                fun:() => {
                    console.log("obj1内的箭头函数",this);//window
                },
                fun1:function(){
                    console.log("obj1内的普通函数",this);//obj1
                },
            }
        }
        // 这两个箭头函数是在全局作用域下创建的, 所以指向的是window
        obj.fun();
        obj.fun1();
        obj.obj1.fun();
        obj.obj1.fun1();

        var div = document.querySelector("div");
        div.onclick = function(){
            console.log("事件函数的this",this);//div
            // 这个箭头函数是在事件函数的局部作用域下创建的, 所以this指向与当前创建所在的作用域一致
            setTimeout(() => {
                console.log("-------",this);//div
            }, 2000);

            // 理解上:箭头函数没有自己的this指向定义; 所以跟着创建位置的this走
            var run = () => {
                console.log(this,"------");//div
            }
            run()
        }
        
        
    </script>
</body>
</html>